<template>
	<view class="discount-list">
		<view class="discount-title">
			-<view class="discount-num">3张</view>优惠券可选-
		</view>
		<view class="dis-count-item"  v-for="(item, i) in disCountList" :key="i">
			<view class="dis-count-msg" :style="[{ backgroundImage: item.isValid === 1 ? 'url(' + imgUrl + ')' : 'url(' + imgUrl_ + ')' }]">
				<view class="dis-price">{{item.price}}<text class="num">元</text>
				</view>
				<view class="dis-title">
					{{item.money_off}}
				</view>
				<view class="dis-time">
					有效期：{{item.period_of_validity}}
				</view>
			</view>
		</view>
		<view class="get-coupon">
			<view class="coupon-right">
				<image class="coupon-icon" src="../../static/my-icon/lip.png" mode=""></image>
				<view class="coupon-text">去领券</view>
				<image class="left-icon" src="../../static/img/right.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: '../../static/img/discount.png',
				imgUrl_: '../../static/img/discount-ac.png',
				disCountList: [{
						price: 10,
						money_off: '单笔满199使用',
						period_of_validity: '2020.05.30-06.30',
						isValid: 1
					},
					{
						price: 20,
						money_off: '单笔满199使用',
						period_of_validity: '2020.05.30-06.30',
						isValid: 1
					},
					{
						price: 40,
						money_off: '单笔满199使用',
						period_of_validity: '2020.05.30-06.30',
						isValid: 1

					}, {
						price: 40,
						money_off: '单笔满199使用',
						period_of_validity: '2020.05.30-06.30',
						isValid: 0
					},
					{
						price: 50,
						money_off: '单笔满199使用',
						period_of_validity: '2020.05.30-06.30',
						isValid: 0
					}
				],
			};
		}
	}
</script>

<style lang="scss">
	page {
		// background-color: #ccc;
	}

	.discount-list {
		padding-bottom: 100rpx;
	}

	.discount-title {
		margin-top: 34rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		letter-spacing: 2rpx;
		color: #000;

		.discount-num {
			font-size: 24rpx;
			letter-spacing: 2rpx;
			color: #c60122;
		}
	}

	.dis-count-item {
		position: relative;
		margin-left: 24rpx;
		margin-bottom: 10rpx;

		.dis-count-msg {
			padding: 10rpx 0 0 30rpx;
			box-sizing: border-box;
			// background: url('@/static/img/discount.png') no-repeat;
			background-repeat: no-repeat;
			background-size: contain;
			width: 100%;
			height: 248rpx;

			.dis-price {
				display: table-cell;
				vertical-align: bottom;
				font-weight: bold;
				font-size: 100rpx;
				color: #ffffff;

				.num {
					font-size: 28rpx;
					color: #ffffff;
				}
			}

			.dis-title {
				font-size: 29rpx;
				line-height: 30rpx;
				color: #ffffff;
			}

			.dis-time {
				font-size: 22rpx;
				color: #ffffff;
				opacity: 0.6;
			}
		}

		.dis-count-img {
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 30rpx;
			height: 30rpx;
		}
	}

	.get-coupon {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 80rpx;
		background-color: #fff;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		.coupon-right {
			display: flex;
			align-items: center;
			margin-right: 24rpx;
			.coupon-icon {
				width: 32rpx;
				height: 32rpx;
			}

			.coupon-text {
				font-size: 28rpx;
				letter-spacing: 3rpx;
				color: #333333;
				margin: 0 18rpx 0 10rpx;
			}

			.left-icon {
				width: 13rpx;
				height: 24rpx;
			}
		}
	}
</style>
